<template>
	<view class="product-detail">
		<base-navbar back-color="#fff" :title="detail.name"></base-navbar>
		<c-swiper :list="detail.images" height="650"></c-swiper>

		<view class="base-info">
			<view class="activity-bar">
				<view class="price-bar">
					<goods-price :value="detail.sale_price">
						<template #suffix>
							<text class="m-price">市场价￥{{detail.market_price}}</text>
						</template>
					</goods-price>
				</view>
			</view>
			<view class="name">{{detail.name}}</view>

			<!-- <view class="coupon-info" v-if="couponList.length>0">
					<view class="tags">
						<text class="tag" v-for="(item,index) in couponList" :key="index">{{item.name}}</text>
					</view>
					<view class="btn" @click="pageRoute('/pages/marketing/coupon/center')">
						<text class="label">领券</text>
						<uni-icons type="right" color="#fff" size="14"></uni-icons>
					</view>
				</view> -->

			<!-- <view class="grid">
					<view class="grid-item" @click="share">
						<uni-icons type="icon-share" custom-prefix="iconfont" size="20" color="#909193"></uni-icons>
						<text class="label">分享</text>
					</view>
					<view class="grid-item" @click="delCollect" v-if="is_collect">
						<uni-icons type="star" size="20" color="#2bc2b8"></uni-icons>
						<text class="label">已收藏</text>
					</view>
					<view class="grid-item" @click="addCollect" v-else>
						<uni-icons type="star" size="20" color="#909193"></uni-icons>
						<text class="label">收藏</text>
					</view>
					<view class="grid-item">
						<uni-icons custom-prefix="iconfont" type="icon-jiangjiatongzhi" size="20"
							color="#909193"></uni-icons>
						<text class="label">降价通知</text>
					</view>
				</view> -->
		</view>

		<view class="goods-show" v-if="detail.introduce"><mp-html :content="detail.introduce"></mp-html></view>

		<view class="goods-content">
			<view class="title">
				<text class="name">商品详情</text>
			</view>
			<view class="content-info">
				<!-- #ifdef H5 || APP -->
				<view v-html="detail.content"></view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<rich-text :nodes="detail.content"></rich-text>
				<!-- #endif -->
			</view>
		</view>

		<view class="evaluate-container">
			<view class="title">
				<text class="name">评价</text>
				<view class="more" @click="pageRoute('/pages/order/evaluate/evaluate-list?goods_id=' + detail.id)">
					查看更多
					<uni-icons type="right" color="#c0c4cc"></uni-icons>
				</view>
			</view>
			<view class="evaluate-list">
				<evaluate-item v-for="(item,index) in commentList" :evaluate="item" :key="index"></evaluate-item>
			</view>
		</view>

		<view class="tool-bar">
			<view class="inner">
				<view class="grid">
					<view class="grid-item" @click="toIndex">
						<uni-icons type="home" size="24"></uni-icons>
						<text class="label">首页</text>
					</view>
					<!-- <view class="grid-item" @click="pageRoute('/pages/service/customer-service/index')">
							<uni-icons type="headphones" size="24"></uni-icons>
							<text class="label">客服</text>
						</view> -->
					<view class="grid-item" @click="openContact">
						<uni-icons type="headphones" size="24"></uni-icons>
						<text class="label">客服</text>
					</view>
				</view>
				<view class="btn-group">
					<c-button round :style="{backgroundColor:themeColor.theme}"
						@click="pageRoute('/pages/order/order-confirm/order-confirm?goods_id=' + detail.id)">
						立即购买
					</c-button>
				</view>
			</view>
		</view>

		<!-- 弹出层组件显示联系电话 -->
		<uni-popup ref="contactRef" background-color="#fff">
			<!-- 弹出层内容 -->
			<view class="popup-content">
				<!-- <text>这是弹出层内容</text> -->
				<view class="label">客服电话</view>
				<view class="item-phone">
					<text class="value">客服电话：{{kefu.service_tel}}</text>
					<text class="copy" @click="callPhone(kefu.service_tel)">拨打</text>
				</view>
				<view class="item-time">
					<text class="value">工作时间：{{kefu.service_time}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	let contactRef = ref(null);

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		detail: [],
		commentList: [],
		is_collect: false,
		memberInfo: {},
		couponList: [],
		kefu: {
			mobile: '',
			business_time: ''
		},
	});

	onLoad((opt) => {
		if (opt.hasOwnProperty('goods_id')) {
			state.detail.id = opt.goods_id;
			getDetail();
		}
		getCouponList();
		getComment();
		getKefuInfo();
	});

	onShow(() => {
		//获取收藏信息
		getCollectInfo();
		//添加浏览记录
		addFootprint();
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function getDetail() {
		request.get('goods/info', {
			id: state.detail.id
		}).then(res => {
			console.log('商品详情', res);
			state.detail = res.data;
		})
	}

	function getCouponList() {
		request.get('coupontype/list', {
			skip: state.couponList.length,
			limit: 5,
		}).then(res => {
			console.log('优惠券列表', res);
			state.couponList = res.data.data;
		})
	}

	function getComment() {
		request.get('ordercomment/list', {
			goods_id: state.detail.id,
			skip: state.commentList.length,
			limit: 10,
		}).then(res => {
			console.log('订单评论', res);
			state.commentList = res.data.data;
		})
	}

	function getKefuInfo() {
		request.get('kefu/index').then(res => {
			console.log('客服', res);
			state.kefu = res.data;
		})
	}

	//添加收藏
	function addCollect() {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			request.post('collection/add', {
				type: 3, //0商品，1店铺，2技师，3服务
				id: state.detail.id,
			}).then(res => {
				uni.showToast({
					title: res.msg
				})
				state.is_collect = true;
			})
		}
	}

	//移除收藏
	function delCollect() {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			request.post('collection/remove', {
				type: 3, //0商品，1店铺，2技师，3服务
				id: state.detail.id,
			}).then(res => {
				uni.showToast({
					title: res.msg
				})
				state.is_collect = false;
			})
		}
	}

	//获取收藏信息
	function getCollectInfo() {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			request.get('collection/info', {
				type: 3, //0商品，1店铺，2技师，3服务
				id: state.detail.id,
			}).then(res => {
				if (res.code == 1) {
					state.is_collect = true;
				} else {
					state.is_collect = false;
				}
			})
		}
	}

	//添加浏览记录
	function addFootprint() {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			request.post('browsinghistory/add', {
				type: 3, //0商品，1店铺，2技师，3服务
				id: state.detail.id,
			}).then(res => {
				console.log('添加浏览记录', res);
			})
		}
	}

	function openContact() {
		contactRef.value.open(); // 显示弹出层
	}

	function toIndex() {
		uni.switchTab({
			url: '/pages/tabbar/index/index'
		})
	}

	function getMemberInfo() {
		request.get('member/getMemberInfo').then(res => {
			console.log('会员信息', res);
			state.memberInfo = res.data;
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.switchTab({
			url
		});
	};

	const {
		themeColor,
		detail,
		commentList,
		is_collect,
		memberInfo,
		couponList,
		kefu,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.product-detail {
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom));

		.base-info {
			background-color: $bg-inverse-color;

			.activity-bar {
				@include f-between;
				height: 94rpx;
				padding: 0 $margin-24;

				.price-bar {
					display: flex;
					align-items: center;

					.price {
						font-size: $font-36;
						color: $error-color;
					}

					.m-price {
						margin-left: $margin-12;
						font-size: $font-24;
						color: $tips-color;
					}
				}

				&.activity {
					background: url('~@/static/images/activity/goods-activity-bar.jpg') no-repeat center/100%;

					.price,
					.m-price {
						color: $inverse-color;
					}

					.m-price {
						font-weight: lighter;
					}

					.time {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.label {
							color: $main-color;
							font-weight: bold;
						}
					}
				}
			}

			.name {
				margin-top: $margin-12;
				padding: 0 $margin-24;
				font-size: $font-32;
				color: $main-color;
				font-weight: bold;
			}

			.grid {
				display: flex;
				padding: $margin-20 0;
				border-top: 1rpx solid lighten($border-color, 8%);

				.grid-item {
					flex: 1;
					@include f-center;

					.label {
						margin-left: $margin-8;
						font-size: $font-24;
					}
				}
			}

			.coupon-info {
				@include f-between;
				margin-top: $margin-12;
				padding: 0 $margin-24;

				.tags {
					@include f-center;

					.tag {
						margin-right: $margin-16;
						padding: 0.3em 0.5em;
						background-color: mix($white-color, $error-color, 85%);
						font-size: $font-22;
						color: $error-color;
						border-radius: $radius-8;
						font-weight: 500;
					}
				}

				.btn {
					@include f-center;
					background-color: $error-color;
					border-radius: $radius-half;
					padding: 0.2em 0.4em 0.2em 0.6em;

					.label {
						font-size: $font-22;
						color: $inverse-color;
					}
				}
			}
		}

		.goods-content {
			margin-top: $margin-24;
			background-color: $bg-inverse-color;

			.title {
				@include f-between;
				padding: $margin-24;
				border-bottom: 1rpx solid lighten($border-color, 8%);

				.name {
					color: $main-color;
					font-size: $font-30;
					font-weight: bold;
				}
			}

			.content-info {
				padding: 0 $margin-24;
			}
		}

		.evaluate-container {
			margin-top: $margin-24;
			background-color: $bg-inverse-color;

			.title {
				@include f-between;
				padding: $margin-24;
				border-bottom: 1rpx solid lighten($border-color, 8%);

				.name {
					color: $main-color;
					font-size: $font-30;
					font-weight: bold;
				}

				.more {
					@include f-center;
					font-size: $font-24;
					color: $tips-color;
				}
			}

			.evaluate-list {
				padding: 0 $margin-24;
			}
		}

		.goods-show {
			margin-top: $margin-24;
			background-color: $bg-inverse-color;
		}

		.tool-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			background-color: $bg-inverse-color;
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);

			.inner {
				@include f-between;
				height: 98rpx;

				.grid {
					display: flex;
					width: 240rpx;
					height: 100%;

					.grid-item {
						@include f-center($direction: column);
						flex: 1;
						height: 100%;

						.label {
							font-size: $font-24;
							color: $tips-color;
						}
					}
				}

				.btn-group {
					flex: 1;
					padding: 0 $margin-24;

					:deep(.c-button) {
						width: 100%;
					}
				}
			}
		}
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;

		.label {
			width: 100%;
			font-size: $font-48;
			text-align: center;
		}

		.item-phone {
			display: flex;
			width: 100%;
			align-items: center;
			padding: $margin-8 0;

			.value {
				flex: 1;
				margin-left: $margin-12;
				font-size: $font-32;
				color: $main-color;
				font-weight: 500;
			}

			.copy {
				font-size: $font-32;
				color: $error-color;
			}
		}

		.item-time {
			align-items: center;
			padding: $margin-8 0;

			.value {
				margin-left: $margin-12;
				font-size: $font-32;
				color: $main-color;
				font-weight: 500;
				text-align: center;
			}
		}
	}
</style>